<#include "/layout/layout.ftl"/>
<@body>
<link href="https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/select2/4.0.6-rc.1/js/select2.full.min.js"></script>
<link href="/lib/jsoneditor/css/jsoneditor.min.css" rel="stylesheet"/>
<script src="/lib/jsoneditor/js/jsoneditor.min.js"></script>
<script src="/script/tool/jsonEditorUtil.js"></script>
<script src="/script/tool/expressionUtil.js"></script>
<script src="/script/tool/dubbo.js"></script>
<link href="/lib/zTree/css/zTreeStyle.css" rel="stylesheet">
<script src="/lib/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script src="/lib/zTree/js/jquery.ztree.exhide-3.5.min.js"></script>
<script src="/script/testplan/plan.js"></script>
<script src="/script/tool/runTestUtil.js"></script>
<style>

    .card {
        margin-bottom: 24px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.035);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.035);
    }

    .card-header {
        display: table;
        width: 100%;
        margin: 0;
        padding: 15px 24px;
        border-bottom: 1px solid rgba(77, 82, 89, 0.05);
    }

    .card-header > * {
        margin: 0;
        display: table-cell;
        vertical-align: middle;
    }

    .bg-primary {
        background-color: #3c8dbc !important;
        color: #fff !important;
    }

    .card-body {
        padding: 24px 24px;
    }

    .card-actions {
        float: right;
        margin-bottom: 0;
        margin-left: auto;
        padding: 0;
    }
</style>
 <section class="content-header">
     <h1>
         测试计划
         <small>两种计划模式选择</small>
     </h1>
 </section>
<div style="height: 95%" class="content">
    <div class="row">
        <div class="col-md-3">
        <#--这里是左侧测试计划以及测试组件-->
            <a href="#" id="addTestPlan" class="btn btn-primary" style="width: 49%">创建测试计划</a>
            <a href="#" id="addComponent" class="btn btn-primary" style="width: 49%">创建测试组件</a>
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">计划列表</h3>
                </div>
                <ul id="testPlanTree" class="ztree"></ul>
            </div>
        </div>
        <div style="float: left;position: relative;min-height: 1px;width: 75%">
            <div class="box box-primary">
                <div id="addComponentPage" class="col-md-12" style="margin-top: 3%;margin-bottom: 3%;">
                    <label class="control-label col-sm-1" for="componentId">选择组件</label>
                    <div class="col-sm-7">
                        <select style="min-width: 200px;width: 500px" class="form-control select2"
                                id="componentId"></select>
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="saveComponentTestCase"
                                class="btn btn-primary btnFont">
                            保存组件和用例
                        </button>
                        <button type="button" style="margin-left:50px" id="deleteComponentTestCase"
                                class="btn btn-primary btnFont">
                            删除
                        </button>
                    </div>
                    <div class="card" style="margin-top: 5%">
                        <div class="card-header bg-primary">
                            <h4>组件</h4>
                            <ul class="card-actions">
                                <li>
                                    <button type="button"><i class="fa-arrows-h"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <input type="hidden" id="testPlanDetailId">
                                <label style="float: left">组件别名:</label>
                                <p id="interfaceAliasName" style="float: left;margin-left: 5%"></p>
                                <label style="float: left;margin-left: 15%">接口名:</label>
                                <p id="interfaceName" style="float: left;margin-left: 5%"></p>
                            </div>
                            <div class="row">
                                <label style="float: left">方法名:</label>
                                <p id="interfaceMethod" style="float: left;margin-left: 5%"></p>

                            </div>
                            <div class="row">
                                <label style="float: left">编码:</label>
                                <p id="encoding" style="float: left;margin-left: 5%"></p>
                                <label style="float: left;margin-left: 10%">超时(秒):</label>
                                <p id="timeout" style="float: left;margin-left: 5%"></p>
                                <label style="float: left;margin-left: 10%">创建人:</label>
                                <p id="userName" style="float: left;margin-left: 5%"></p>
                            </div>
                        </div>
                    </div>
                    <div id="casePage">
                        <table id="dataTable"></table>
                    </div>
                    <div id="suitePage">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="expression" id="expression">
                                <input id="invoke" type="button" style="margin-left: 1%" value="调用一次"
                                       class="btn btn-primary">
                                <input id="addExpression" class="btn bg-primary" style="margin-left: 1%" type="button"
                                       value="新增断言表达式">
                                <input id="testExpression" class="btn bg-primary" style="margin-left: 1%" type="button"
                                       value="测试表达式">
                                <label class="col-md-2 control-label">断言类型：</label>
                                <div class="col-md-2">
                                    <select class="form-control" name="assertType" id="assertType">
                                        <option value="1">全文匹配</option>
                                        <option value="2">包含</option>
                                        <option value="3">不包含</option>
                                        <option value="4">jsonPath</option>
                                        <option value="5">xPath</option>
                                        <option value="6">正则</option>
                                    </select>
                                </div>
                                <label class="col-md-2 control-label">数据提取器类型：</label>
                                <div class="col-md-2">
                                    <select class="form-control" name="extractorType" id="extractorType">
                                        <option value="-1" selected>不提取</option>
                                        <option value="4">jsonPath</option>
                                        <option value="5">xPath</option>
                                        <option value="6">正则</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 1%" >
                            <div class="col-md-12">
                                <#--<label class="col-md-2 control-label">表达式：</label>-->
                                <div class="panel panel-default" id="expressionPanel" >
                                <#--<div class="panel-heading">表达式</div>-->
                                    <div class="row">
                                        <table id="expressionTable">

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <h4>入参:
                                        <span style="color: red">方法参数解释:0代表是第一个参数，1代表第二个参数，以此类推</span>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="height: 64%">
                            <div class="col-md-12">
                                <div id="param">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <h4>返回结果:
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="height: 64%">
                            <div class="col-md-12">
                                <div id="result">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <span id="noPlanAlert" style="font-size: 20px;margin-top: 5%;height: 100px">您还没有测试计划哦,请创建测试计划</span>
        <#--这里是创建计划以及创建测试任务-->
            <div id="addPlanPage">
                <div class="box-header with-border">
                    <h3 class="box-title">创建/修改测试计划</h3>
                    <div class="box-tools pull-right">
                        <div class="has-feedback">
                        </div>
                    </div>
                </div>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">计划名称</label>
                        <div class="col-md-5">
                            <input type="hidden" id="testPlanId" name="id">
                            <input id="testPlanName" name="testPlanName" type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="runMode">计划运行模式</label>
                        <div class="col-md-5">
                            <select class="form-control" id="runMode" name="runMode">
                                <option value="1">单接口数据驱动</option>
                                <option value="2">多接口场景运行</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="scheduleTask">定时任务</label>
                        <div class="col-md-5">
                            <select class=" form-control" id="scheduleTask" name="scheduleTask">
                                <option value="1" selected>开启定时任务</option>
                                <option value="2">关闭定时任务</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="taskForm">
                        <label class="col-md-2 control-label">定时任务</label>
                        <div class="col-md-5">
                            <div>
                                <input name="weekTime" type="checkbox" value=1/>星期一
                                <input name="weekTime" type="checkbox" value=2/>星期二
                                <input name="weekTime" type="checkbox" value=3/>星期三
                                <input name="weekTime" type="checkbox" value=4/>星期四
                                <input name="weekTime" type="checkbox" value=5/>星期五
                                <input name="weekTime" type="checkbox" value=6/>星期六
                                <input name="weekTime" type="checkbox" value=7/>星期日
                            </div>
                            <div>
                                <select id="hhTime" name="hhTime" style="width: 70px">
                                    <option value="0" selected="selected">00</option>
                                    <option value="1">01</option>
                                    <option value="2">02</option>
                                    <option value="3">03</option>
                                    <option value="4">04</option>
                                    <option value="5">05</option>
                                    <option value="6">06</option>
                                    <option value="7">07</option>
                                    <option value="8">08</option>
                                    <option value="9">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                </select>时
                                <select id="mmTime" name="mmTime" style="width: 70px">
                                    <option value=1 selected="selected">01</option>
                                    <option value=2>02</option>
                                    <option value=3>03</option>
                                    <option value=4>04</option>
                                    <option value=5>05</option>
                                    <option value=6>06</option>
                                    <option value=7>07</option>
                                    <option value=8>08</option>
                                    <option value=9>09</option>
                                    <option value=10>10</option>
                                    <option value=27>27</option>
                                    <option value=28>28</option>
                                    <option value=29>29</option>
                                    <option value=30>30</option>
                                    <option value=31>31</option>
                                    <option value=32>32</option>
                                    <option value=33>33</option>
                                </select>分
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="sendTo">收件人</label>
                        <div class="col-md-5">
                            <textarea maxlength='100' class="form-control"
                                      style="min-height: 10%;max-height: 30%;min-width: 450px;max-width: 500px"
                                      placeholder="邮箱地址请以,隔开"
                                      name="sendTo" id='sendTo'>
                            </textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">计划描述</label>
                        <div class="col-md-5">
                            <textarea style="min-height: 10%;max-height: 20%;min-width: 450px;max-width: 500px"
                                      name="description" id="description" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-7">
                            <input id="runTestPlan" style="float: right;margin-left: 20px" type="button"
                                   class="btn btn-primary" value="运行">
                            <input id="savePlan" style="float: right;margin-left: 20px" type="button" value="保存"
                                   class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

</@body>